<template>
  <div>
    <Header :head="head" />
    <img :src="'https://elm.cangdu.org/img/'+$route.query.img" alt />
    <p class="title">{{this.$route.query.name}}</p>
    <p class="introduce">{{this.$route.query.description}}</p>
    <p class="fraction">
      <span>评分:</span>
      <span>5</span>
    </p>
    <p class="four">
      <span>{{this.$route.query.tips}}</span>
    </p>
    <p class="five">
      <span>好评率:{{this.$route.query.satisfy_rate}}%</span>
      <span>售价:{{this.$route.query.price}}起</span>
    </p>
  </div>
</template>

<script>
import Header from './Header'
export default {
  components: {
    Header
  },
  data() {
    return {
      head: '详情'
    }
  },
  methods: {},
  mounted() {
    //window.console.log(this.$route.query.list.aaa)
  }
}
</script>
<style  scoped>
img {
  width: 100%;
  height: 100vw;
}
p {
  margin-bottom: 0.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
}
.title {
  font-size: 1rem;
  font-weight: bold;
}
.introduce {
  font-size: 0.8rem;
}
.fraction {
  color: #ff9900;
}
.four > span {
  font-size: 0.8rem;
  color: #000;
  margin-right: 1rem;
}
.five > span:last-child {
  font-size: 0.8rem;
  color: #ff9900;
}
.five > span:first-child {
  margin-right: 1rem;
}
.five {
  font-size: 0.8rem;
  color: #000;
}
</style>